<template>
<div class=" detail-panel-comment" :class="{'comment-datail':taboole}">
      <div class="comment-nav">
        <div class="wrapper" id="commentNav" style="touch-action: pan-y pinch-zoom;" v-if="isReview != 1">
            <div class="comment-nav-scroller">

                <ul v-for="(item,index) in reviewCounts" v-bind:key="index">
                   <swiper :options="swiperOption3">
                      <swiper-slide>

                        <li><router-link :to="{path:'/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/total'}"  class="current" :class="{'active': nowtab=='total' ||nowtab==''}" replace><p>全部评价</p><i>{{item.totalCount}}</i></router-link></li> <!-- @click="_initScroll('total',item.totalCount)" -->
                    </swiper-slide>
                    <swiper-slide>
                    <li><router-link :to="{path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/good'}"  class="current" :class="{'active': nowtab=='good'}" replace><p>好评</p><i>{{item.fiveStarCount+item.fourStarCount}}</i></router-link></li>
                    </swiper-slide>
                    <swiper-slide>
                        <li><router-link :to="{path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/normal'}"  class="current" :class="{'active': nowtab=='normal'}" replace><p>中评</p><i>{{item.totalCount-item.fiveStarCount-item.fourStarCount-item.oneStarCount}}</i></router-link></li>
                    </swiper-slide>
                    <swiper-slide>
                        <li><router-link :to="{path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/bad'}"  class="current" :class="{'active': nowtab=='bad'}" replace><p>差评</p><i>{{item.oneStarCount}}</i></router-link></li>
                    </swiper-slide>
                    <swiper-slide>
                      <li><router-link :to="{path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/picFlag'}"  class="current" :class="{'active': nowtab=='picFlag'}" replace><p>有图</p><i>{{item.picFlagCount}}</i></router-link></li>
                    </swiper-slide>
                    <swiper-slide>
                    <li><router-link :to="{path: '/detail/'+$route.params.cmmdtyCode+'/'+$route.params.supplierCode+'/vcomment/again'}"  class="current" :class="{'active': nowtab=='again'}" replace><p>追评</p><i>{{item.againCount}}</i></router-link></li>
                    </swiper-slide>
                      <!-- <div class="swiper-pagination3" slot="pagination"></div> -->
                  </swiper>
                </ul>
            </div>
        </div>
    </div>
     <!-- <comment-main :commentmain="commentmain" :reviewCounts="reviewCounts"></comment-main>    -->
    <router-view></router-view>
 
</div>  
   
</template>

<script>
import { getCommentCount } from '@/service/getData'
import  commentMain  from './commentMain'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data(){
      return {
         nowtab : this.$route.params.commentname,

         reviewCounts:[],

         commentmain:[],
         isReview:'',

         swiperOption3: {
          pagination: '.swiper-pagination3',
          slidesPerView:4,
          paginationClickable: true
        },

        top:0
      }
    },
    watch:{
      reviewCounts(curVal,oldVal) {
         this.reviewCounts = curVal
       },
       $route(){
          this.nowtab = this.$route.params.commentname;
       }
    },
    computed:{
        ...mapState({
            taboole:"taboole"
         })
    },
    created(){
         this.isReview = sessionStorage.isReview
  
        //评价的概括
         if(this.isReview != '1') {
              getCommentCount({
                  'cmmdtyCode': this.$route.params.cmmdtyCode,
                  'supplierCode': this.$route.params.supplierCode,
                  'rand':{
                      _: Math.random()+10000000
                    }
              })
              .then((json) => {
                var data1 = json.reviewCounts[0];
                  this.reviewCounts.push(data1);
                 
                  this.$store.dispatch('vComment', {
                    total: data1.totalCount,
                    good: data1.fiveStarCount+data1.fourStarCount,
                    normal: data1.totalCount-data1.fiveStarCount-data1.fourStarCount-data1.oneStarCount,
                    bad: data1.totalCount-data1.fiveStarCount-data1.fourStarCount-data1.oneStarCount,
                    picFlag: data1.picFlagCount,
                    again:data1.againCount
                  })
              })
          }
        
    },
    methods:{
      


    }, 
    components: {
      swiper,
      swiperSlide,
      commentMain
    }
    
}
 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

 
 .comment-datail {
        padding: 1.6rem 0 2.4rem;
        height: 24rem;
    }
   .comment-nav {
    height: 2rem
}
.comment-nav .wrapper {
    position: relative;
    height: 100%;
    border-bottom: solid 1px #DDD;
}
 

.comment-nav .wrapper {
    position: relative;
    height: 100%;
    border-bottom: solid 1px #DDD;
}
.comment-nav .comment-nav-scroller {
    position: absolute;
    width: 15rem;
    height: 2rem;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.comment-nav .comment-nav-scroller ul li {
    float: left;
    width: 3.2rem;
    margin: 0;
}
.comment-nav .comment-nav-scroller ul li a {
    display: block;
    width: 100%;
    height: 2rem;
    padding-top: .32rem;
    line-height: .68rem;
    text-align: center;
    font-size: .52rem;
    color: #353d44;
}
.comment-nav .comment-nav-scroller ul li a i {
    color: #999;
}
.comment-nav .comment-nav-scroller ul li a.active {
    border-bottom: solid 2px #FFC001;
}
.comment-nav-scroller .swiper-slide {
  display: inline-block;
  width: auto;
  margin-right: 0;
}
</style>
